/**
 * 视频详情
 * Create by Songlcy
 */
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_aliplayer/flutter_aliplayer.dart';
import 'package:flutter_aliplayer/flutter_aliplayer_factory.dart';
import 'package:shimmer/shimmer.dart';
import 'package:scoped_model/scoped_model.dart';

import './video_desc_tab_page.dart';
import './video_play_tab_page.dart';
import './video_plot_tab_page.dart';
import '../../utils/device_util.dart';
import '../../models/pood/video_model.dart';
import '../../constants/video_detail_tab.dart';
import '../../components/cached_image_component.dart';
import '../../components/hero_image_component.dart';
import '../../delegate/sliver_appbar_delegate.dart';
import '../../models/state_model/video_detail_state_model.dart';

class VideoDetailPage extends StatefulWidget {
  VideoModel videoItem;
  VideoDetailPage({required this.videoItem});

  @override
  State<StatefulWidget> createState() => _VideoDetailPageState();
}

class _VideoDetailPageState extends State<VideoDetailPage> {
  late VideoDetailStateModel videoDetailStateModel;
  late FlutterAliplayer fAliplayer;
  @override
  void initState() {
    super.initState();
    videoDetailStateModel = new VideoDetailStateModel();
    videoDetailStateModel.fetchVideoDetail(widget.videoItem.id);

    fAliplayer = FlutterAliPlayerFactory.createAliPlayer();
  }

  @override
  Widget build(BuildContext context) {
    return ScopedModel(
      model: videoDetailStateModel,
      child: Scaffold(
        body: DefaultTabController(
          length: VIDEO_DETAIL_TAB.length,
          child: NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                // 标题
                SliverAppBar(
                  elevation: 0.0,
                  floating: false,
                  pinned: true,
                  expandedHeight:
                    DeviceUtil.getScreenSize(context).width * 1.05,
                    flexibleSpace: FlexibleSpaceBar(
                      title: Text(
                        "${widget.videoItem.name}",
                        style: TextStyle(
                          fontSize: 16.0,
                        ),
                      ),
                      // Shimmer.fromColors(
                      //   baseColor: Colors.white,
                      //   highlightColor: Theme.of(context).primaryColor,
                      //   period: Duration(milliseconds: 6000),
                      //   child: Text(
                      //     "${widget.videoItem.name}",
                      //     style: TextStyle(
                      //       fontSize: 16.0,
                      //     ),
                      //   ),
                      // ),
                      //(widget.videoItem
                      centerTitle: true,
                      background: AliPlayerView(
                        onCreated: onViewPlayerCreated,
                        x:0,
                        y:0,
                        width: 200,
                        height: 290,
                      ),
                    ),
                  actions: <Widget>[
                    // 收藏按钮
                    Text("收藏")
                  ],
                ),
                // Tab
                SliverPersistentHeader(
                  pinned: true,
                  delegate: SliverAppBarDelegate(TabBar(
                    labelColor: Theme.of(context).primaryColor,
                    labelStyle: TextStyle(fontSize: 16.5),
                    unselectedLabelColor: Color.fromARGB(255, 192, 193, 195),
                    indicatorColor: Theme.of(context).primaryColor,
                    indicatorWeight: 2.0,
                    tabs: VIDEO_DETAIL_TAB
                        .map<Tab>((item) => Tab(
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  item["icon"],
                                  SizedBox(width: 3.0),
                                  Text(item["name"],
                                      style: TextStyle(fontSize: 15.0))
                                ],
                              ),
                            ))
                        .toList(),
                  )),
                )
              ];
            },
            body: VideoDetailContent(widget.videoItem),
          ),
        ),
      )
    );
  }
  void onViewPlayerCreated(viewId) async {
    this.fAliplayer.setPlayerView(viewId);
    print(widget.videoItem.toString());
    //this.fAliplayer.setUrl(_dataSourceMap[DataSourceRelated.URL_KEY]);
    // switch (_playMode) {
    //   case ModeType.URL:
    //     this.fAliplayer.setUrl(_dataSourceMap[DataSourceRelated.URL_KEY]);
    //     break;
    //   case ModeType.STS:
    //     this.fAliplayer.setVidSts(
    //         vid: _dataSourceMap[DataSourceRelated.VID_KEY],
    //         region: _dataSourceMap[DataSourceRelated.REGION_KEY],
    //         accessKeyId: _dataSourceMap[DataSourceRelated.ACCESSKEYID_KEY],
    //         accessKeySecret:
    //         _dataSourceMap[DataSourceRelated.ACCESSKEYSECRET_KEY],
    //         securityToken: _dataSourceMap[DataSourceRelated.SECURITYTOKEN_KEY],
    //         definitionList: _dataSourceMap[DataSourceRelated.DEFINITION_LIST],
    //         previewTime: _dataSourceMap[DataSourceRelated.PREVIEWTIME_KEY]);
    //     break;
    //   case ModeType.AUTH:
    //     this.fAliplayer.setVidAuth(
    //         vid: _dataSourceMap[DataSourceRelated.VID_KEY],
    //         region: _dataSourceMap[DataSourceRelated.REGION_KEY],
    //         playAuth: _dataSourceMap[DataSourceRelated.PLAYAUTH_KEY],
    //         definitionList: _dataSourceMap[DataSourceRelated.DEFINITION_LIST],
    //         previewTime: _dataSourceMap[DataSourceRelated.PREVIEWTIME_KEY]);
    //     break;
    //   case ModeType.MPS:
    //     this.fAliplayer.setVidMps(_dataSourceMap);
    //     break;
    //   default:
    // }
  }
}

/**
 * 头部
 */
// class HeaderBackGroundCover extends StatelessWidget {
//   final VideoModel video;
//   HeaderBackGroundCover(this.video);
//
//   @override
//   Widget build(BuildContext context) {
//     return Container(
//       child: Stack(
//         children: <Widget>[
//           // 底图
//           Positioned.fill(
//             child: CachedImageComponent(
//                 imageUrl: video.thumbnail, boxFit: BoxFit.fill),
//           ),
//           // 毛玻璃
//           Positioned(
//               child: BackdropFilter(
//                 filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
//                 child: Container(
//                   decoration: BoxDecoration(color: Colors.black.withAlpha(60)),
//                 ),
//               )
//           ),
//           // 内容
//           Positioned(
//               left: 0.0,
//               top: 60.0,
//               right: 0.0,
//               child: Column(
//                 mainAxisAlignment: MainAxisAlignment.center,
//                 crossAxisAlignment: CrossAxisAlignment.center,
//                 children: <Widget>[
//                   AliPlayerView(
//                       onCreated: onViewPlayerCreated,
//                       x:0,
//                       y:0,
//                       width: 200,
//                       height: 290,
//                   ),
//                   Container(
//                     width: 200.0,
//                     height: 290.0,
//                     margin: EdgeInsets.only(left: 10.0),
//                     child: HeroImageComponent(
//                       imageItem: video,
//                       imageWidth: 200.0,
//                       imageHeight: 300.0,
//                     ),
//                     decoration: BoxDecoration(boxShadow: <BoxShadow>[
//                       BoxShadow(
//                           color: Colors.black.withAlpha(50),
//                           offset: Offset(0.0, 2.0),
//                           blurRadius: 6.0),
//                       BoxShadow(
//                           color: Colors.black.withAlpha(20),
//                           offset: Offset(0.0, 3.0),
//                           blurRadius: 8.0)
//                     ]),
//                   )
//                 ],
//               ))
//         ],
//       ),
//     );
//   }
//
// }

class VideoDetailContent extends StatelessWidget {
  final VideoModel video;
  VideoDetailContent(this.video);

  @override
  Widget build(BuildContext context) {
    return TabBarView(
      children: <Widget>[
        VideoDescTabPage(video),
        VideoPlayTabPage(),
        VideoPlotTabPage()
      ],
    );
  }
}
